/* eslint-disable no-unused-expressions */
/* eslint-disable react/destructuring-assignment */
import React, { Component } from 'react';
import moment from 'moment';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Input, List, Avatar, Button } from 'antd';
import { withRouter } from 'dva/router';
import DescriptionList from '@/components/DescriptionList';
import proImg from '../../assets/proImg.png';
import judegAuthority from '../SocialManage/judgeAuthority';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const { TextArea } = Input;
@Form.create()
class ProDetail extends Component {
  componentDidMount() {}

  onClose = () => {
    window.history.back();
  };

  proFeedBack = () => {
    const {
      form: { validateFields },
    } = this.props;
    validateFields((err, values) => {
      if (!err) {
        this.props.onFeedBack(values);
        this.props.form.resetFields();
      }
    });
  };

  cancelSign = () => {
    const {
      form: { validateFields },
    } = this.props;
    validateFields((err, values) => {
      if (!err) {
        this.props.onCancelSign(values);
      }
    });
  };

  modifyData = () => {
    this.props.onModifyData && this.props.onModifyData();
  };

  render() {
    const {
      location,
      proBaseList,
      proFbList,
      form: { getFieldDecorator },
      isModify,
      isNotAlrtObj = false, // 默认有提醒对象
      isNotBlngCs = false, // 默认有所属客服
    } = this.props;
    const authority = judegAuthority(location);
    return (
      <Card
        title="问题人员"
        style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
      >
        <Form>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="姓名">{proBaseList.empName}</Description>
            <Description term="证件号">{proBaseList.certId}</Description>
            <Description term="电话">{proBaseList.phone ? proBaseList.phone : '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="客户">{proBaseList.custName}</Description>
            <Description term="执行地">{proBaseList.areaName || '--'}</Description>
            <Description term="问题对象">{proBaseList.probObj}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="问题人员类型">{proBaseList.probTypeIdName}</Description>
            <Description term="问题说明">{proBaseList.probTypeDesc}</Description>
            {!isNotAlrtObj && (
              <Description term="提醒对象">{proBaseList.alrtObj || '--'}</Description>
            )}
          </DescriptionList>
          <DescriptionList>
            {!isNotBlngCs && (
              <Description term="所属客服">{proBaseList.blngCs || '--'}</Description>
            )}
            <Description term="提出人">{proBaseList.creName}</Description>
            <Description term="提出时间">
              {moment(proBaseList.creTime).format('YYYY-MM-DD HH:mm')}
            </Description>
          </DescriptionList>
        </Form>
        <Row
          gutter={64}
          style={
            authority === 'socaccmanagesend' ||
            (proBaseList.updateJurisdFlag === 2 && { marginBottom: 24 })
          }
        >
          {authority === 'socaccmanagesend' || proBaseList.updateJurisdFlag === 2 ? null : (
            <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
              <FormItem label="反馈">
                {getFieldDecorator('content', {
                  rules: [{ required: true, message: '请输入反馈内容' }],
                })(<TextArea placeholder="请输入反馈内容" maxLength={50} />)}
              </FormItem>
            </Col>
          )}
        </Row>
        <div>
          <h4>反馈记录</h4>
          <List
            itemLayout="horizontal"
            split={false}
            dataSource={proFbList}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={proImg} />}
                  title={
                    <div>
                      <span>{item.creName}</span>
                      <span style={{ marginLeft: 20 }}>{item.role}</span>
                    </div>
                  }
                  description={
                    <div>
                      <p> {item.content}</p>
                      <p>{moment(item.creTime).format('YYYY-MM-DD HH:mm')}</p>
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        </div>
        <p style={{ textAlign: 'center', marginTop: 32 }}>
          <Button style={{ marginRight: 10 }} onClick={this.onClose}>
            {' '}
            关闭{' '}
          </Button>
          {(isModify && authority !== 'socaccmanagesend') || proBaseList.updateJurisdFlag === 1 ? (
            <Button style={{ marginRight: 10 }} onClick={this.modifyData}>
              {' '}
              修改业务数据{' '}
            </Button>
          ) : null}

          {authority === 'socaccmanagesend' || proBaseList.updateJurisdFlag === 2 ? null : (
            <Button type="primary" style={{ marginRight: 10 }} onClick={this.proFeedBack}>
              {' '}
              反馈
            </Button>
          )}
          {authority === 'socaccmanagesend' || proBaseList.updateJurisdFlag === 2 ? null : (
            <Button type="primary" style={{ marginRight: 10 }} onClick={this.cancelSign}>
              反馈并取消标记{' '}
            </Button>
          )}
        </p>
      </Card>
    );
  }
}
export default withRouter(ProDetail);
// export default ProDetail;
